<template>
    <div :class="['login-wrapper', ['', 'login-form-right', 'login-form-left'][direction]]">
      <el-form
        ref="form"
        size="large"
        :model="form"
        :rules="rules"
        class="login-form ele-bg-white"
        @keyup.enter.native="doSubmit">
        <h4>仿微信聊天作业</h4>
        <el-form-item prop="username">
          <el-input
            clearable
            v-model="form.username"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            show-password
            v-model="form.password"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item prop="captcha">
          <div class="login-input-group">
            <el-input
              clearable
              v-model="form.captcha"
              prefix-icon="el-icon-_vercode"
              placeholder="请输入验证码"/>
            <img
              alt=""
              v-if="captcha"
              :src="captcha"
              @click="changeCode"
              class="login-captcha"/>
          </div>
        </el-form-item>
        <div class="el-form-item">
          <el-checkbox v-model="form.remember">记住密码</el-checkbox>
        </div>
        <div class="el-form-item">
          <el-button
            size="large"
            type="primary"
            class="login-btn"
            :loading="loading"
            @click="doSubmit">
            {{ loading ? '登录中' : '登录' }}
          </el-button>
        </div>
      </el-form>
    </div>
  </template>

<script>
import { mapActions } from 'vuex'
import { authApi } from '@/api'
export default {
  name: 'Login',
  data () {
    return {
      // 登录框方向, 0居中, 1居右, 2居左
      direction: 0,
      // 加载状态
      loading: false,
      // 表单数据
      form: {
        username: 'admin',
        password: '123456',
        captcha: '520',
        key: '',
        remember: true
      },
      // 验证码base64数据
      captcha: '',
      // 验证码内容, 实际项目去掉
      text: ''
    }
  },
  computed: {
    // 表单验证规则
    rules () {
      return {
        username: [
          { required: true, message: '请输入用户名', type: 'string', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', type: 'string', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', type: 'string', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.changeCode()
  },
  methods: {
    ...mapActions([
      'GetUserInfo'
    ]),
    /* 提交 */
    doSubmit () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.loading = true
        authApi.login(this.form).then((res) => {
          this.loading = false
          if (res.code === 0) {
            this.$message.success('登录成功')
            localStorage.setItem('Authorization', res.data.access_token)
            this.GetUserInfo()
            const query = this.$route.query
            this.$router.push({
              path: query.from || '/'
            })
          } else {
            this.$message.error(res.data.msg)
            // 重新刷新验证码
            this.changeCode()
          }
        })
      })
    },
    /* 跳转到首页 */
    goHome () {
      const query = this.$route.query
      const path = query && query.from ? query.from : '/'
      this.$router.push(path)
    },
    /* 更换图形验证码 */
    changeCode () {
      // 这里演示的验证码是后端返回base64格式的形式
      authApi.getCaptcha().then(res => {
        console.log(res)
        if (res.code === 0) {
          this.captcha = res.data.captcha
          this.form.key = res.data.key
          this.$refs.form.clearValidate()
        } else {
          this.$message.error(res.msg)
        }
      }).catch((e) => {
        this.$message.error(e.message)
      })
    }
  }
}
</script>

  <style scoped>
  /* 背景 */
  .login-wrapper {
    width: 800px;
    padding: 50px 20px;
    position: relative;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
  }

  .login-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* 卡片 */
  .login-form {
    margin: 0 auto;
    width: 380px;
    max-width: 100%;
    padding: 25px 30px;
    position: relative;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    border-radius: 4px;
    z-index: 2;
  }

  .login-form-right .login-form {
    margin: 0 15% 0 auto;
  }

  .login-form-left .login-form {
    margin: 0 auto 0 15%;
  }

  .login-form h4 {
    text-align: center;
    margin: 0 0 25px 0;
  }

  .login-form > .el-form-item {
    margin-bottom: 25px;
  }

  /* 验证码 */
  .login-input-group {
    display: flex;
    align-items: center;
  }

  .login-input-group ::v-deep .el-input {
    flex: 1;
  }

  .login-captcha {
    height: 38px;
    width: 102px;
    margin-left: 10px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    text-align: center;
    cursor: pointer;
  }

  .login-captcha:hover {
    opacity: .75;
  }

  .login-btn {
    display: block;
    width: 100%;
  }

  /* 第三方登录图标 */
  .login-oauth-icon {
    color: #FFF;
    padding: 5px;
    margin: 0 10px;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
  }

  /* 底部版权 */
  .login-copyright {
    color: #eee;
    padding-top: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  /* 响应式 */
  @media screen and (min-height: 550px) {
    .login-form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      margin-top: -220px;
    }

    .login-form-right .login-form,
    .login-form-left .login-form {
      left: auto;
      right: 15%;
      transform: translateX(0);
      margin: -220px auto auto auto;
    }

    .login-form-left .login-form {
      right: auto;
      left: 15%;
    }

    .login-copyright {
      position: absolute;
      bottom: 20px;
      right: 0;
      left: 0;
    }
  }

  @media screen and (max-width: 768px) {
    .login-form-right .login-form,
    .login-form-left .login-form {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      margin-right: auto;
    }
  }
  </style>
